<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view>
			<view class="search-box">
				<view class="cell-box">
					<view class="gogo">
						<view>快递公司</view>
						<view class="input-box">
							<u-input v-model="form1.name" type="select" :border="true" @click="express.show = true" height="88" />
							<u-action-sheet :list="express.list" v-model="express.show" @click="actionSheetCallback" label-name="label" ></u-action-sheet>
						</view>
					</view>
				</view>

				<view class="cell-box" style="margin-top: 40rpx; ">
					<u-field v-model="form1.no" label="快递单号" placeholder="请填写快递单号"></u-field>
				</view>
			</view>

			<view class="btn-box">
				<view class="btn" @click="search()">
					<u-button type="primary" size="medium" @click="search()" :custom-style="{ backgroundColor: '#418bf0', color: '#ffffff', width: '264rpx' }" > 查询 </u-button>
				</view>
				<view class="btn" v-if="history.list && history.list.length > 0">
					<u-button type="default" size="medium" @click="history.show = true" :ripple-bg-color="'white'" :hair-line='false' ripple :custom-style="{ backgroundColor: '#cccccc', color: '#000000', width: '264rpx' }" > 搜索记录 </u-button>
				</view>
			</view>
		</view>

		<u-action-sheet :list="history.list" v-model="history.show" @click="histroryCallback" ></u-action-sheet>
		<!-- 这个是有货时候展示的内容部分 -->
		<view v-if="data && data.dataSize" style="background-color: #ededed;">
			<express-step direction="column" :options="data" :active="0"></express-step>
		</view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
	</view>
</template>

<script>
var vk = uni.vk; // vk依赖
var historyKeyName = "kh-express-history";
var historyList = uni.vk.getStorageSync(historyKeyName) || []; //储存历史记录的数据
const expressList = [
	{ label:"中通快递", value:"zhongtong" },
	{ label:"申通快递", value:"shentong" },
	{ label:"圆通快递", value:"yuantong" },
	{ label:"顺丰速运", value:"shunfeng" },
	{ label:"天天快递", value:"tiantian" },
	{ label:"中国邮政", value:"bgpyghx" },
	{ label:"韵达速递", value:"yunda" },
	{ label:"德邦快递/物流", value:"debang" },
	{ label:"其他", value:"auto" }
];

import expressStep from "./components/express-step"
export default {
	components:{
		expressStep
	},
	data() {
		// 页面数据变量
		return {
			// init请求返回的数据
			data: {

			},
			// 表单请求数据
			form1: {
				name: "",
				no: "",
				phone: ""
			},
			scrollTop: 0,
			// 历史记录
			history:{
				show: false,
				list: historyList
			},
			// 快递公司
			express:{
				show: false,
				list: expressList
			}
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			// 这个地方要执行数据初始化函数
			console.log("init: ", options);
			if (!options.no) {
				return false;
			}
			let { name, no, phone } = options;
			that.form1.name = decodeURIComponent(name);
			that.form1.no = no;
			that.form1.phone = phone;
			that.search();
		},
		pageTo(path) {
			vk.navigateTo(path);
		},
		actionSheetCallback(index) {
			let that = this;
			that.form1.name = expressList[index].text;
		},
		histroryCallback(index) {
			let that = this;
			//历史记录的回调函数
			that.form1.name = that.history.list[index].name;
			that.form1.no = that.history.list[index].no;
			that.form1.phone = that.history.list[index].phone;
			that.search("mark");
		},
		// 查询
		search(type) {
			let that = this;
			let { form1 } = that;
			let expressItem = vk.pubfn.getListItem(expressList, "label", form1.name);
			form1.com = expressItem ? expressItem.value : "auto";
			vk.callFunction({
				url: "plugs/express.getInfo",
				title: "查询中...",
				data: form1,
				success: res => {
					let data = res.data;
					that.data = data;
					if (type !== "mark" && data.dataSize) {
						// 添加到历史查询记录
						let historyList = that.history.list;
						if (data.expTextName) {
							let historyObj = {
								text: data.expTextName + "：" + data.mailNo,
								name: data.expTextName,
								no: data.mailNo,
								phone: form1.phone
							};
							historyList.unshift(historyObj);
							historyList = vk.pubfn.arr_concat(historyList, [], "text");
							if (historyList.length > 10) {
								historyList.pop();
							}
							that.history.list = historyList;
							vk.setStorageSync(historyKeyName, historyList);
						}
					}
				}
			});
		},
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.app {
	min-height: 100vh;
	background-color: #ededed;
}

.search-box {
	padding: 50rpx 28rpx;
	background-color: #418bf0;
	.cell-box {
		background-color: white;
		.input-box {
			flex: 1;
		}
		.gogo {
			display: flex;
			align-items: center;
			border: none;
			outline: none;
			margin-left: 28rpx;
		}
	}
}

.btn-box {
	text-align: center;
	margin: 0;
	margin-top: 30rpx;
	display: flex;
	justify-content: space-around;
}

/deep/ .u-input--border {
	border: none !important ;
	outline: none !important;
}
/deep/ .input-placeholder {
	color: #c0c4cc;
}
</style>
